<template>
  <dv-border-box-7
    class="PlaLineData"
    :color="['transparent']"
    backgroundColor="rgba(1,32,78,.8)"
  >
    <div class="pla-line-data">
      <div class="line"></div>
      <div class="line2 line"></div>
      <div class="PlaLineData-head">
        <div class="title-sys">
          <span>国际业务数据统计</span>
        </div>
      </div>
      <div class="PlaLineData-content">
        <div class="item">
          <div class="item-top">
            <span class="point c-00DFFF"><span class="in"></span></span>
            在线咨询量
          </div>
          <div class="item-content c-00DFFF">{{ formatter(msgTotal) }}</div>
        </div>
        <div class="item">
          <div class="item-top">
            <span class="point c-00F1C8"><span class="in"></span></span>
            在线交易量
          </div>
          <div class="item-content c-00F1C8">{{ formatter(orderTotal) }}</div>
        </div>
      </div>
      <div class="PlaLineData-content">
        <div class="item">
          <div class="item-top">
            <span class="point c-4298FF"><span class="in"></span></span>
            线上服务量
          </div>
          <div class="item-content c-4298FF">{{ formatter(serviceTotal) }}</div>
        </div>
        <div class="item">
          <div class="item-top">
            <span class="point c-9F79FF"><span class="in"></span></span>
            线上活动量
          </div>
          <div class="item-content c-9F79FF">
            {{ formatter(innovationTotal) }}
          </div>
        </div>
      </div>
    </div>

  </dv-border-box-7>
</template>

<script>
import {
  reqMsgTotal,
  reqOrderTotal,
  reqServiceTotal,
  reqInnovationTotal,
} from "@/request/api";

export default {
  name: "PlaLineData",
  data() {
    return {
      msgTotal: 0,
      orderTotal: 0,
      serviceTotal: 0,
      innovationTotal: 0,
      timer: null,
    };
  },
  created() {
    this.getMsgTotal();
    this.getOrderTotal();
    this.getServiceTotal();
    this.getInnovationTotal();
    this.timer = setInterval(() => {
      this.getMsgTotal();
      this.getOrderTotal();
      this.getServiceTotal();
      this.getInnovationTotal();
    }, 10000);
  },
  methods: {
    // 数据处理
    formatter(number) {
      let numbers = number.toString().split("").reverse();
      const segs = [];
      while (numbers.length) segs.push(numbers.splice(0, 3).join(""));
      return segs.join(",").split("").reverse().join("");
    },
    //在线咨询量
    getMsgTotal() {
      reqMsgTotal().then((res) => {
        if (res.data.ret) {
          this.msgTotal = res.data.data;
        }
      });
    },
    //交易数量
    getOrderTotal() {
      reqOrderTotal().then((res) => {
        if (res.data.ret) {
          if (this.orderTotal.toString() !== res.data.data.toString()) {
            this.orderTotal = res.data.data;
          }
        }
      });
    },
    //交易数量
    getServiceTotal() {
      reqServiceTotal().then((res) => {
        if (res.data.ret) {
          if (this.serviceTotal.toString() !== res.data.data.toString()) {
            this.serviceTotal = res.data.data;
          }
        }
      });
    },
    getInnovationTotal() {
      reqInnovationTotal().then((res) => {
        if (res.data.ret) {
          if (this.innovationTotal.toString() !== res.data.data.toString()) {
            this.innovationTotal = res.data.data;
          }
        }
      });
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); //关闭
    } //利用vue的生命周期函数
  },
};
</script>

<style scoped>
.pla-line-data {
  box-shadow: -6px 0 100px -1px #021838;
  height: 100%;
}
.PlaLineData {
  margin-top: 2.96vh;
  height: 31.85vh;
  position: relative;
}
.line {
  width: 19.097vw;
  height: 0.069vw;
  background: linear-gradient(
    270deg,
    rgba(37, 106, 178, 0) 0%,
    #256ab2 47%,
    rgba(37, 106, 178, 0) 100%
  );
  border-radius: 0.069vw;
  opacity: 0.76;

  position: absolute;
  top: 18.99vh;
}
.line2 {
  transform: rotate(90deg);
  width: 12.778vw;
  left: 3.25vw;
}
.PlaLineData-head {
  height: 7.22vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-sys {
  width: 89%;
  position: relative;
  color: #fff;
  font-size: 1.111vw;
  height: 3.09vh;
  padding-left: 0.486vw;

  font-weight: bold;
  background: url("../assets/img1.png") no-repeat;
  background-size: 100% auto;
  background-position: bottom;

}
.title-sys  span{
      background-image:-webkit-linear-gradient(top,rgba(255, 255, 255, 1),rgba(155, 204, 255, 1)); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;
  }

.PlaLineData-content {
  display: flex;
}
.PlaLineData-content .item {
  flex: 1;
  height: 11.36vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px solid #ffffff; */
}
.PlaLineData-content .item .item-top {
  display: flex;
  align-items: center;
  font-size: 0.833vw;
  color: rgba(255,255,255,.6);

}
.PlaLineData-content .item .item-content {
  font-size: 1.528vw;
  font-weight: 900;
  margin-top: 1.11vh;
  font-family: DINPro-Medium, DINPro;
}
.c-00DFFF {
  color: #00dfff;
}
.c-00F1C8 {
  color: #00f1c8;
}
.c-4298FF {
  color: #4298ff;
}
.c-9F79FF {
  color: #9f79ff;
}
.point {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  position: relative;
  width: 0.75vw;
  margin-right: 0.486vw;
  height: 0.75vw;
  border-radius: 0.903vw;
  margin-top: -0.069vw;
  animation-name: light;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.point.c-00DFFF {
  border: 0.069vw solid #00dfff;
}
.point.c-00F1C8 {
  border: 0.069vw solid #00f1c8;
}
.point.c-4298FF {
  border: 0.069vw solid #4298ff;
}
.point.c-9F79FF {
  border: 0.069vw solid #9f79ff;
}
.point .in {
  width: 0.374vw;
  height: 0.374vw;
  border-radius: 0.375vw;
  position: absolute;
  left: 0.188vw;
  top: 0.180vw;
}
.point.c-00DFFF .in {
  background: #00dfff;
}
.point.c-00F1C8 .in {
  background: #00f1c8;
}
.point.c-4298FF .in {
  background: #4298ff;
}
.point.c-9F79FF .in {
  background: #9f79ff;
}

@keyframes light {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
</style>